<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>摄像头拍照</title>
  </head>
  <body onload="init()">
    <video id="video"></video>
    <div id="operators">
      <button id="capture">拍照</button>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <button id="changeCamera">切换摄像头</button>
    </div>
    <canvas id="canvas" width="480" height="320"></canvas>
    <script>
      var cameraFront = ''
      //访问用户媒体设备的兼容方法
      function getUserMedia(constraints, success, error) {
        currentCamera = constraints
        if (navigator.mediaDevices.getUserMedia) {
          //最新的标准API
          navigator.mediaDevices
            .getUserMedia(constraints)
            .then(success)
            .catch(error)
        } else if (navigator.webkitGetUserMedia) {
          //webkit核心浏览器
          navigator.webkitGetUserMedia(constraints, success, error)
        } else if (navigator.mozGetUserMedia) {
          //firfox浏览器
          navigator.mozGetUserMedia(constraints, success, error)
        } else if (navigator.getUserMedia) {
          //旧版API
          navigator.getUserMedia(constraints, success, error)
        }
      }

      let video = document.getElementById('video')
      let canvas = document.getElementById('canvas')
      let context = canvas.getContext('2d')
      //视频流变量
      var localMediaStream

      function success(stream) {
        //兼容webkit核心浏览器
        let CompatibleURL = window.URL || window.webkitURL
        //将视频流设置为video元素的源
        console.log(stream)
        //video.src = CompatibleURL.createObjectURL(stream);
        video.srcObject = stream
        video.play()
        localMediaStream = stream
      }

      function error(error) {
        alert(`访问用户媒体设备失败${error.name}, ${error.message}`)
      }

      if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
        //调用用户媒体设备, 访问摄像头   video和audio：  {video : {width: 480, height: 320}}   使用前置摄像头, 代码如下: {video: {facingMode: 'user'}}    后置摄像头, 代码如下: {video: {facingMode: {exact : 'environment'}}}
        getUserMedia({ audio: true, video: { facingMode: { exact: 'environment' } } }, success, error)
      } else {
        alert('不支持访问用户媒体')
      }

      document.getElementById('capture').addEventListener('click', function() {
        context.drawImage(video, 0, 0, 480, 320)
      })
      //当前摄像头
      var currentCamera
      document.getElementById('changeCamera').addEventListener('click', function() {
        //关闭打开的摄像头
        localMediaStream.getTracks().forEach(function(track) {
          track.stop()
        })

        if (currentCamera.video.facingMode == 'user') {
          getUserMedia({ audio: true, video: { facingMode: { exact: 'environment' } } }, success, error)
        } else {
          getUserMedia({ audio: true, video: { facingMode: 'user' } }, success, error)
        }
      })

      function init() {
        document.getElementById('operators').style.width = document.getElementById('video').style.width
        document.getElementById('operators').style.textAlign = 'center'
      }
    </script>
  </body>
</html>
